﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="SampleTopicsFilterExternal.aspx.cs" Inherits="OpenWaves.ActivityFeed.Web.Tests.Samples.SampleTopicsFilterExternal" %>

<%@ Import Namespace="OpenWaves.ActivityFeed" %>
<%@ Register TagPrefix="af" Namespace="OpenWaves.ActivityFeed.Web.Controls" Assembly="OpenWaves.ActivityFeed.Web" %>
<%@ Register Src="~/Samples/SampleDescription.ascx" TagName="SampleDescription" TagPrefix="c" %>


<asp:Content ContentPlaceHolderID="head" runat="server">
    
    <style type="text/css" media="all">
        .ui-dialog-buttonset
        {
            font-size: 10px;
        }
        
        .ui-dialog-content, .ui-dialog-title
        {
            font-size: 14px;
        }
        
        .row {
            padding-left: 50px;
            display: block;
        }        
        
        .row label {
            width: 100px;
        }
        
        #topicsFilterWindow ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        #topicsFilterWindow ul li {
            display: inline-block;
        }  
            
    </style>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#topicsFilterWindow").dialog({
                autoOpen: false,
                resizable: false,
                height: 200,
                width: 450,
                modal: true,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                        filterUpdates();
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });

        function filterUpdates() {
            var topicsFilter = new Array();
            $("#topicsFilterWindow input[type=checkbox]").each(function () {
                if (this.checked) {
                    topicsFilter.push(this.value);
                }
            });

            afMain.topicsFilter(topicsFilter);
        }

        function showTopicsFilter() {

            $("#topicsFilterWindow input[type=checkbox]").each(function () {
                this.checked = $.inArray(this.value, afMain.topicsFilter()) != -1;
            });

            $("#topicsFilterWindow").dialog("open");
        }

    </script>

</asp:Content>

<asp:Content ContentPlaceHolderID="cphBody" runat="server">


<c:SampleDescription ID="SampleDescription1" runat="server">
    <MessageTemplate>
        <p>This example shows how to filter updates by list of topics. Updates are filterd, after "ok" button is clicked in filter dialog window.</p>
        <p>If you don't have many test updates use <a href="../UpdatesGenerator.aspx">Updates generator</a></p>
    </MessageTemplate>
</c:SampleDescription>

<h3>Topics filter</h3>

    <div style="padding-bottom: 10px">
        <input type="button" onclick="showTopicsFilter()" value="Show Topics Filter Window"/>
    </div>
    <af:ActivityFeed ID="afMain" ClientIDMode="static" runat="server" FeedType="Global">
    </af:ActivityFeed>
    
    <div id="topicsFilterWindow" title="Topics filter">
        <asp:ListView runat="server" ID="lstMain">
            <LayoutTemplate>
                <ul><asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder></ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li><input type="checkbox" value='<%# Eval("Topic") %>'/> <%# Eval("DisplayName") %></li>
            </ItemTemplate>
        </asp:ListView>
    </div>

</asp:Content>
